<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./font_4765172_os1q3nbeptk/iconfont.js"></script>
    <link rel="stylesheet" href="./css/platform.css">
    <title>bilibili会员购</title>
</head>
<body>

<div class="zcy22001030403-bili-header__bar">
    <ul class="zcy22001030403-left-entry">
        <li>
            <a href="index.html" class="zcy22001030403-entry-title">
                <svg class="zcy22001030403-icon" aria-hidden="true" width="18" height="18" viewBox="0 0 18 18">
                    <use xlink:href="#icon-dsj"></use>
                </svg>
                <span>首页</span>
            </a>
        </li>
        <li class="zcy22001030403-v-popover-wrap">
            <a href="" class="zcy22001030403-default-entry">
                <span>番剧</span>
            </a>
        </li>
        <li class="zcy22001030403-v-popover-wrap">
            <a href="" class="zcy22001030403-default-entry">
                <span>直播</span>
            </a>
        </li>
        <li class="zcy22001030403-v-popover-wrap">
            <a href="" class="zcy22001030403-default-entry">
                <span>游戏中心</span>
            </a>
        </li>
        <li class="zcy22001030403-v-popover-wrap">
            <a href="platform.html" class="zcy22001030403-default-entry">
                <span>会员购</span>
            </a>
        </li>
        <li class="zcy22001030403-v-popover-wrap">
            <a href="" class="zcy22001030403-default-entry">
                <span>漫画</span>
            </a>
        </li>
        <li class="zcy22001030403-v-popover-wrap">
            <a href="" class="zcy22001030403-default-entry">
                <span>赛事</span>
            </a>
        </li>
        <li>
            <a href="" class="zcy22001030403-download-entry zcy22001030403-download-client-trigger">
                <svg class="zcy22001030403-icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai3"></use>
                </svg>
                <span>下载客户端</span>
            </a>
        </li>
    </ul>

    <div class="zcy22001030403-center-search-container">
        <div class="zcy22001030403-nav-searchform">
            <div class="zcy22001030403-nav-search-content">
                <input type="text" placeholder="活动、嘉宾、场馆" />
            </div>
            <div class="zcy22001030403-nav-search-btn">
                <svg class="zcy22001030403-icon-searchBtn" aria-hidden="true">
                    <use xlink:href="#icon-heiseBzhandaohangtubiao-lunkuohuamiaobian-02"></use>
                </svg>
            </div>
        </div>
    </div>

    <ul class="zcy22001030403-right-entry">
        <div class="zcy22001030403-user-left">
            <div class="zcy22001030403-carmer">
                <img
                src="./img/index/seele.jpg"
                width="36px"
                height="36px"
                alt=""
                />
            </div>
        </div>
        <div class="zcy22001030403-user-mid">
            <a href="#" class="zcy22001030403-user-ui">
                <svg class="zcy22001030403-icon" aria-hidden="true">
                    <use xlink:href="#icon-dingdanzhongxin1"></use>
                </svg>
                <span>订单中心</span>
            </a>
        </div>
    </ul>
</div>

<div class="zcy22001030403-tab">
    <div class="zcy22001030403-t-title">
        <div class="zcy22001030403-t-title">
            <p id="zcy22001030403-link1" class="active">漫展演出</p>
            <p id="zcy22001030403-link2">B站周边</p>
        </div>
    </div>
    <div class="zcy22001030403-timg"><img src="./img/platform/header.jpg"></div>
    <div class="zcy22001030403-project-wrapper"></div>
    <div class="zcy22001030403-whole-pagination-wrapper">
        <span class="zcy22001030403-page-control zcy22001030403-prev">&lt;</span>
        <span class="zcy22001030403-page-number zcy22001030403-active">1</span>
        <span class="zcy22001030403-page-number">2</span>
        <span class="zcy22001030403-page-number">3</span>
        <span class="zcy22001030403-page-control zcy22001030403-next">&gt;</span>
    </div>
</div>

<div class="zcy22001030403-footer">
    <div class="zcy22001030403-end-wrapepr">
        <div class="zcy22001030403-end-header">
            <div style="border-right: 1px solid #eeeeee; margin-right: 35px">
                <h2 class="zcy22001030403-end-title">bilibili</h2>
                <ul class="zcy22001030403-aboutSection">
                    <li>关于我们</li>
                    <li>友情链接</li>
                    <li>联系我们</li>
                    <li>隐私政策</li>
                    <li>用户协议</li>
                    <li>bilibili认证</li>
                    <li>加入我们</li>
                    <li>investor Relation</li>
                </ul>
            </div>
            <div style="border-right: 1px solid #eeeeee; width: 45%">
                <h2 class="zcy22001030403-end-title">传送门</h2>
                <ul class="zcy22001030403-aboutSection s-2">
                    <li>协议汇总</li>
                    <li>帮助中心</li>
                    <li>名人堂</li>
                    <li>活动中心</li>
                    <li>用户反馈论坛</li>
                    <li>MCN管理中心</li>
                    <li>活动专题页</li>
                    <li>壁纸站</li>
                    <li>高级弹幕</li>
                    <li>侵权申诉</li>
                    <li>广告合作</li>
                    <li>企业号官网</li>
                </ul>
            </div>
            <div class="zcy22001030403-downloadWrapper">
                <ul class="zcy22001030403-download">
                    <li class="zcy22001030403-download-app">
                        <div class="zcy22001030403-dicon-wrapper">
                            <svg class="zcy22001030403-dicon" aria-hidden="true">
                                <use xlink:href="#icon-xiazai"></use>
                            </svg>
                        </div>
                        <p>下载APP</p>
                    </li>
                    <li class="zcy22001030403-sina-weibo">
                        <div class="zcy22001030403-dicon-wrapper">
                            <svg class="zcy22001030403-dicon" aria-hidden="true">
                                <use xlink:href="#icon-xinlangweibo"></use>
                            </svg>
                        </div>
                        <p>新浪微博</p>
                    </li>
                    <li class="zcy22001030403-weixin">
                        <div class="zcy22001030403-dicon-wrapper">
                            <svg class="zcy22001030403-dicon" aria-hidden="true">
                                <use xlink:href="#icon-weixin15"></use>
                            </svg>
                        </div>
                        <p>官方微信</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('zcy22001030403-link1').addEventListener('click', function() {
        window.location.href = 'platform.html'; 
    });

    document.getElementById('zcy22001030403-link2').addEventListener('click', function() {
        window.location.href = 'platformmall.html'; 
    });

    window.addEventListener('scroll', function() {
        var header = document.querySelector('.zcy22001030403-bili-header__bar');
        var scrollPosition = window.scrollY;

        if (scrollPosition > 100) {  
            header.classList.add('zcy22001030403-sticky');  
        } else {
            header.classList.remove('zcy22001030403-sticky');  
        }
    });

    const data = [
            {
                url: './img/platform/10002.jpeg',
                title: '北京·《名侦探柯南：迷宫的十字路口》跨年特别观影会',
                time: '2024-12-21',
                address: '活力天宝国际影城',
                price: '￥100起'
            },
            {
                url: './img/platform/10001.jpeg',
                title: '乌兰察布·第一届DM次元动漫游戏嘉年华',
                time: '2024-12-21',
                address: '乌兰察布宾馆',
                price: '￥45起'
            },
            {
                url: './img/platform/10011.jpeg',
                title: '云浮·初梦动漫嘉年华',
                time: '2024-12-28',
                address: '维也纳国际酒店',
                price: '￥45起'
            },
            {
                url: './img/platform/100010.jpeg',
                title: '梅河口·梅小漫·首届二次元全女派对',
                time: '2025-01-25',
                address: 'OMG跳舞俱乐部',
                price: '￥89起'
            },
            {
                url: './img/platform/10003.jpeg',
                title: '锦州·WAP·碧空万象动漫展',
                time: '2025-02-01 - 2025-02-02',
                address: '花加美地',
                price: '￥45起'
            },
            {
                url: './img/platform/10004.jpeg',
                title: '北京·《名侦探柯南：迷宫的十字路口》跨年特别观影会',
                time: '2024-12-21',
                address: '活力天宝国际影城',
                price: '￥100起'
            },
            {
                url: './img/platform/10005.jpeg',
                title: '乌兰察布·第一届DM次元动漫游戏嘉年华',
                time: '2024-12-21',
                address: '乌兰察布宾馆',
                price: '￥45起'
            },
            {
                url: './img/platform/10006.png',
                title: '云浮·初梦动漫嘉年华',
                time: '2024-12-28',
                address: '维也纳国际酒店',
                price: '￥45起'
            },
            {
                url: './img/platform/10007.jpeg',
                title: '梅河口·梅小漫·首届二次元全女派对',
                time: '2025-01-25',
                address: 'OMG跳舞俱乐部',
                price: '￥89起'
            },
            {
                url: './img/platform/10008.jpeg',
                title: '锦州·WAP·碧空万象动漫展',
                time: '2025-02-01 - 2025-02-02',
                address: '花加美地',
                price: '￥45起'
            }
            
        ];

   
    function createProjectHTML(row) {
        return `
            <div class="zcy22001030403-project-list">
                <div class="zcy22001030403-project-img">
                    <img src="${row.pic}" alt="活动图片">
                </div>
                <div class="zcy22001030403-project-item">
                    <div class="zcy22001030403-project-name">
                        <span>${row.title}</span>
                    </div>
                    <div class="zcy22001030403-project-time">
                        <span>${row.time}</span>
                    </div>
                    <div class="zcy22001030403-project-address">
                        <span>${row.address}</span>
                    </div>
                    <div class="zcy22001030403-project-price">
                        <span class="zcy22001030403-symbol">${row.priceSymbol}</span>
                        <span class="zcy22001030403-price">${row.priceValue}</span>
                        <span class="zcy22001030403-strat">${row.priceStart}</span>
                    </div>
                </div>
            </div>
        `;
    }


    const json = data.map(item => {
        const priceMatch = item.price.match(/￥(\d+)(起)/);
        return {
            pic: item.url,
            title: item.title,
            time: item.time,
            address: item.address,
            priceSymbol: '￥',
            priceValue: priceMatch ? priceMatch[1] : '',
            priceStart: priceMatch ? priceMatch[2] : ''
        };
    });

    const projectWrapper = document.querySelector(".zcy22001030403-project-wrapper");

    json.forEach(row => {
        projectWrapper.innerHTML += createProjectHTML(row);
    });

    const itemsPerPage = 8; // 每页显示8个项目
    let currentPage = 1; // 当前页

    // 渲染指定页的项目
    function renderProjects(page) {
        const start = (page - 1) * itemsPerPage;
        const end = start + itemsPerPage;
        projectWrapper.innerHTML = ""; // 清空内容
        json.slice(start, end).forEach(row => {
            projectWrapper.innerHTML += createProjectHTML(row);
        });
    }

    function renderPagination(totalItems) {
        const totalPages = Math.ceil(totalItems / itemsPerPage);
        const paginationWrapper = document.querySelector(".zcy22001030403-whole-pagination-wrapper");
        paginationWrapper.innerHTML = `
            <span class="zcy22001030403-page-control zcy22001030403-prev">&lt;</span>
        `;
        for (let i = 1; i <= totalPages; i++) {
            paginationWrapper.innerHTML += `
                <span class="zcy22001030403-page-number ${i === currentPage ? "zcy22001030403-active" : ""}">${i}</span>
            `;
        }
        paginationWrapper.innerHTML += `
            <span class="zcy22001030403-page-control zcy22001030403-next">&gt;</span>
        `;

  
        document.querySelectorAll(".zcy22001030403-page-number").forEach(el => {
            el.addEventListener("click", () => {
                currentPage = parseInt(el.textContent);
                renderProjects(currentPage);
                renderPagination(totalItems);
            });
        });

        document.querySelector(".zcy22001030403-prev").addEventListener("click", () => {
            if (currentPage > 1) {
                currentPage--;
                renderProjects(currentPage);
                renderPagination(totalItems);
            }
        });

        document.querySelector(".zcy22001030403-next").addEventListener("click", () => {
            if (currentPage < totalPages) {
                currentPage++;
                renderProjects(currentPage);
                renderPagination(totalItems);
            }
        });
    }

   
    renderProjects(currentPage);
    renderPagination(json.length);
</script>

</body>
</html>
